<template>
  <div class="home">
    <Head />
    <img src="" alt="">
    <div class="home_content">
      <div class="home_right">
        <NotLogin v-if="!authorization" />
        <AuthorInformation
          v-if="authorization"
          :user="tokenUser"
          :title="'个人信息'"
        />
        <ReleaseTopic />
        <UnansweredTopic />
        <LeagueTable />
        <FriendshipCommunity />
        <ClientQrCode />
      </div>
      <div class="home_left">
        <ul class="home_left_ul">
          <li @click="getArticle">
            <router-link to="/">
              <span :class="iftab()">全部</span></router-link
            >
          </li>
          <li @click="getArticle">
            <router-link to="/?tab=0"
              ><span :class="iftab(0)">精华</span></router-link
            >
          </li>
          <li @click="getArticle" v-for="(v, i) of categories" :key="i">
            <router-link :to="'/?tab=' + v.id"
              ><span :class="iftab(v.id)">{{ v.name }}</span></router-link
            >
          </li>
          <!-- <li @click="getArticle">
            <router-link to=""><span>客户端测试</span></router-link>
          </li> -->
        </ul>
        <ArticleList :list="list" :querys="querys" v-if="list.length" />
        <el-empty
          v-else
          style="width: 200px; margin: auto; display: block"
          :image-size="200"
        ></el-empty>
        <div style="height: 60px; padding-top: 15px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-size="pagination.limit"
            layout=" prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Head from "@/components/Head.vue"; //头部
import ArticleList from "@/components/ArticleList.vue"; //话题列表
import NotLogin from "@/components/NotLogin.vue"; //个人信息
import AuthorInformation from "@/components/AuthorInformation.vue"; //个人信息
import ReleaseTopic from "@/components/ReleaseTopic.vue"; //发布话题
import UnansweredTopic from "@/components/UnansweredTopic.vue"; //为回复话题
import LeagueTable from "@/components/LeagueTable.vue"; //积分排行榜
import FriendshipCommunity from "@/components/FriendshipCommunity.vue"; //友情社区
import ClientQrCode from "@/components/ClientQrCode.vue"; //客户端二维码

export default {
  name: "Home",
  components: {
    Head,
    ArticleList,
    NotLogin,
    AuthorInformation,
    ReleaseTopic,
    UnansweredTopic,
    LeagueTable,
    FriendshipCommunity,
    ClientQrCode,
  },
  data() {
    return {
      tokenUser: {},
      authorization: localStorage.getItem("authorization"),
      categories: [],
      list: [],
      pagination: {
        page: 1,
        limit: 1,
        total: 1,
      },
      querys: "",
    };
  },
  methods: {
    getUserToken() {
      if (this.authorization) {
        this.axios
          .get("/get/user/token")
          .then((res) => {
            this.tokenUser = res.data.results;
          })
          .catch((error) => {
            console.log(error);
            localStorage.setItem("authorization", "");
          });
      }
    },
    getCategories() {
      this.axios
        .get("/get/categorie")
        .then((res) => {
          if (res.data.results.code != 200) {
            this.$message.error(res.data.results.message);
          } else {
            this.categories = res.data.results.data;
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.message);
        });
    },
    iftab(tab) {
      let querytab = this.$route.query.tab;
      if (querytab == "") {
        querytab = undefined;
      }
      if (querytab == tab) {
        return "home_left_ul_li_span";
      }
    },
    getArticle() {
      this.axios
        .get("/get/article?" + this.$route.fullPath.split("?")[1])
        .then((res) => {
          if (res.data.code == 0) {
            this.list = res.data.results.data.article;
            this.pagination.total = Number(res.data.results.data.total);
            this.pagination.page = Number(res.data.results.data.page);
            this.pagination.limit = Number(res.data.results.data.limit);
            this.querys = res.data.results.data.tab;
            if (this.querys == "") {
              this.querys = "00";
            }
            // console.log(res.data.results);
          } else {
            this.$message.error(res.data.results.message);
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error(error.message);
        });
    },
    handleCurrentChange(val) {
      this.$router.push({
        path: "/",
        query: {
          page: val,
          tab: this.$route.query.tab,
        },
      });
      this.getArticle();
    },
    analysisTime(time) {
      const _d1 = new Date();
      const dateDiffer = Math.abs(_d1.getTime() - time);
      //准换年
      const year = Math.floor(dateDiffer / (1000 * 60 * 60 * 24 * 365));
      //取余数
      const years = dateDiffer % (1000 * 60 * 60 * 24 * 365);
      //将余数转换成月
      const month = Math.floor(years / (1000 * 60 * 60 * 24 * 30));
      //将余数转换成天
      const day = Math.floor(years / (1000 * 60 * 60 * 24));
      //取余数
      const hours = years % (1000 * 60 * 60 * 24);
      //将余数转换小时
      const hour = Math.floor(hours / (1000 * 60 * 60));
      // console.log(year,month,day,hour);
      if (year > 0) {
        return year + "年前";
      } else if (month > 0) {
        return month + "个月前";
      } else if (day > 0) {
        return day + "天前";
      } else if (hour > 0) {
        return hour + "小时前";
      } else {
        return "1小时之前";
      }
    },
  },
  created() {
    this.getCategories();
    this.getArticle();
    this.getUserToken();
  },
};
</script>
<style>
.home_content {
  padding-top: 15px;
  width: 90%;
  margin: auto;
}
.home_left {
  margin-right: 305px;
  background: #ffffff;
}
.home_right {
  float: right;
  width: 290px;
}
.home_left_ul {
  height: 40px;
  background: #f6f6f6;
  line-height: 40px;
  list-style: none;
}
.home_left_ul li {
  float: left;
  margin-left: 15px;
}
.home_left_ul li span {
  color: #6fb300;
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
  font-size: 14px;
}
.home_left_ul_li_span {
  background: #6fb300;
  color: #ffffff !important;
}
.home_left .ArticleList li:hover {
  background: #f0f0f0;
}
.home_left .ArticleList_div_title {
  color: rgb(0, 0, 0);
}
.home_left .ArticleList_div_title:hover {
  color: rgb(0, 0, 0);
  text-decoration: underline;
}
@media screen and (max-width: 980px) {
  .home_right {
    display: none;
  }
  .home_left {
    width: 100%;
  }
  .head_ul {
    clear: both;
    float: none;
  }
  .home_content {
    width: 98%;
  }
}
</style>
